<template>
  <el-dialog
    v-model="dialog.visible"
    title="查询数据修改日志"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form ref="dataForm" :model="entity" label-suffix="：">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="类全名">
            {{ entity.className }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="记录ID">
            {{ entity.recordId }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="字段名称">
            {{ entity.fieldName }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="更新前的值">
            <span style="word-break: break-all">
              {{ entity.oldValue }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="更新后的值">
            <span style="word-break: break-all">
              {{ entity.newValue }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上次更新人">
            {{ entity.lastModifyUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上次更新时间">
            {{ entity.lastModifyTime }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="本次更新人">
            {{ entity.modifyUserName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本次更新时间">
            {{ entity.modifyTime }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
    </template>
  </el-dialog>
</template>
<script>
import { getDetail } from '@/api/log/dataModifyLog'

export default {
  name: 'DataModifyLogView',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      entity: {},
    }
  },
  methods: {
    openHandler() {
      getDetail(this.dialog.id).then((res) => {
        this.entity = res.data.data
      })
    },
    closeHandler() {
      this.entity = {}
    },
  },
}
</script>
